CodeIgniter Template

Blog · desenvolvimento · projetos 27.09.2016

Funcionamento

Nesta aplicação, criaremos 5 arquivos:

application/views/html.php
application/views/templates/head.php
application/views/templates/scripts.php
application/views/pages/example/index.php
application/controllers/Example.php

Basicamente, funcionará da seguinte maneira:

O site é acessado via web e o controller é carregado.
O método executa o que for necessário e por fim, carregará a view html.php
A view html.php será responsável por carregar os blocos da página: head, scripts e o conteúdo.

Nada fora do normal, exceto pelo fato das views serem requisitadas pelo html.php.

O grande ganho com esse sistema de template é que não há necessidade de duplicação de código. Acompanhe os arquivos abaixo e você entenderá melhor:

Mãos a obra!

Primeiro, crie o arquivo application/views/html.php como no exemplo:

application/views/html.php

<!doctype html>
<html lang="<?= isset($lang) ? $lang : 'en' ?>">
<?php
$this->load->view('templates/head');
?>
<body<?= isset($body_attr) ? " {$body_attr}" : '' ?>>
<?php
$this->load->view("pages/{$page}");
$this->load->view('templates/scripts');
?>
</body>
</html>

Em seguida, construa o head em application/views/templates/head.php:

application/views/templates/head.php

<head>
    <meta charset="UTF-8">
    <title><?= isset($title) ? $title : 'CodeIgniter' ?></title>
<?php
// CSS Links
if (isset($link_css)):
    foreach ($link_css as $link):
        echo '<link rel="stylesheet" href="' . $link . '">';
    endforeach;
endif;

// CSS Inline
if (isset($inline_css)):
    echo '<style type="text/css">';
    foreach ($inline_css as $inline):
        echo $inline;
    endforeach;
    echo '</style>';
endif;
?>
</head>

E o arquivo para o javascript em application/views/templates/scripts.php:

application/views/templates/scripts.php

<?php
// JS Links
if (isset($link_js)):
    foreach ($link_js as $link):
        echo '<script src="' . $link . '" type="text/javascript"></script>';
    endforeach;
endif;

// JS Inline
if (isset($inline_js)):
    echo '<script type="text/javascript">';
    foreach ($inline_js as $inline):
        echo $inline;
    endforeach;
    echo '</script>';
endif;

Feito isso, vamos à página de exemplo em application/views/pages/example/index.php:

application/views/pages/example/index.php

<div class="container">
    <div class="jumbotron">
        <h1>
        <span class="glyphicon glyphicon-fire"></span> CodeIgniter Template</h1>
        <p>Esta é uma página de exemplo.</p>
    </div>
</div>

Com as views já criadas, podemos fazer um controller em application/controllers/Example.php:

application/controllers/Example.php

<?php

class Example extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        // Precisamos desse helper para usarmos a função base_url()
        $this->load->helper('url');
    }

    public function index()
    {
        // views/html.php - Idioma da página html
        $data['lang'] = 'pt-BR';

        // views/pages/example/index.php - Conteúdo do body
        // Crie uma pasta com o nome do controller e arquivo com nome do método para melhor organizar
        $data['page'] = 'example/index';

        // views/templates/head.php - Título da Página
        $data['title'] = 'CodeIgniter Template';

        // views/html.php - Atributos da tag body
        $data['body_attr'] = 'class="grey"';

        // views/templates/head.php - CSS links.
        // Adicione os links de suas folhas de estilo
        $data['link_css'] = array(
            'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', // Externo
            base_url('assets/css/styles.css'), // Local
        );

        // views/templates/head.php - CSS inline. Será inserido dentro da tag style, no head
        $data['inline_css'] = array(
            'body {padding-top: 70px}',
            '.grey {background-color: #f9f9f9}',
            '.jumbotron {background-color: #343131; color: #b3b3b3 }',
            'h1 {color: #fff !important}',
            '.glyphicon-fire {color: #dd4814; font-size: 150%}',
        );

        // views/templates/scripts.php - JS links. Serão inseridos na view scripts.php
        $data['link_js'] = array(
            'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
            'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js',
            base_url('assets/js/scripts.js'),
        );

        // views/templates/scripts.php - JS inline. Será inserido dentro da tag script
        $data['inline_js'] = array(
            'console.log("Hello!")',
        );

        // Carrega a view principal e define os dados dinâmicos
        $this->load->view('html', $data);
    }

}

Fim

Acredito que, só de analisar o código, você já consiga ter uma noção do funcionamento. Mas o melhor, mesmo, sempre é a prática. Então, que tal começar?

Você pode baixar, abrir issues ou fazer um fork e contribuir com esse projeto no GitHub.

Uhm, tá. Certo. Ultimamente eu tenho andado muito sonolento.
O que acha de me comprar um café? Comprar um café

Natan Felles

Funcionamento

Mãos a obra!

Fim

Pesquisar